/**
 * Creates the base structure of checkbox field.
 * @member Ext.form.field.Checkbox
 */
@mixin extjs-form-checkboxfield {
  .#{$prefix}form-cb-wrap {
    padding-top: 3px;
  }

  .#{$prefix}form-checkbox,
  .#{$prefix}form-radio {
    vertical-align: -1px;

    width: $form-checkbox-size;
    height: $form-checkbox-size;
    background: no-repeat;
    background-image: theme-background-image($theme-name, $form-checkbox-image);

    overflow: hidden;
    padding: 0;
    border: 0;

    &::-moz-focus-inner {
      padding: 0;
      border: 0;
    }
  }
  @if $include-ie {
    /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
    .#{$prefix}nbr.#{$prefix}ie {
      .#{$prefix}form-checkbox,
      .#{$prefix}form-radio {
        font-size: 0;
      }
    }
  }
  .#{$prefix}form-cb-checked {
    .#{$prefix}form-checkbox,
    .#{$prefix}form-radio {
      background-position: 0 (0 - $form-checkbox-size);
    }
  }

  /* Focused */
  .#{$prefix}form-cb-focus {
    background-position: (0 - $form-checkbox-size) 0;
  }
  .#{$prefix}form-cb-checked {
    .#{$prefix}form-cb-focus {
      background-position: (0 - $form-checkbox-size) (0 - $form-checkbox-size);
    }
  }

  /* Radios */
  .#{$prefix}form-radio {
    background-image: theme-background-image($theme-name, $form-radio-image);
  }

  /* boxLabel */
  .#{$prefix}form-cb-label-before {
    margin-right: 4px;
  }
  .#{$prefix}form-cb-label-after {
    margin-left: 4px;
  }


}